<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="flow-demo" id="ID-flow-demo"></div>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/layui/layui.js"></script> 
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo', // 流加载容器
    scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
    done: function(page, next){ // 执行下一页的回调
      // 模拟数据插入
      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 8; i++){
          lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
        }
        
        // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < 10); // 此处假设总页数为 10
      }, 520);

      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 6; i++){
          lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
        }
        next(lis.join(''), page < 6); // 假设总页数为 6
      }, 520);

      
    }
  });
});
</script>
 <!-- https://layui.gitee.io/v2/themes/layuiAdmin/2.0/iframe/views/component/grid/all.html -->
</body>
</html>